@charset "utf-8";
@mixin transition($property: all, $duration: 0, $timing-function: ease) {
  @if ($property == none) {
    -webkit-transition: none;
            transition: none;
  } @else {
    -webkit-transition: $property $duration $timing-function;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
            transition: $property $duration $timing-function;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
  }
}
@mixin ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@mixin rotate($deg) {
  -ms-transform:rotate($deg);
  -moz-transform:rotate($deg);
  -webkit-transform:rotate($deg);
  -o-transform:rotate($deg);
  transform:rotate($deg)
}
@mixin scale($scale) {
  -ms-transform:scale($scale);
  -moz-transform:scale($scale);
  -webkit-transform:scale($scale);
  -o-transform:scale($scale);
  transform:scale($scale)
}
@mixin delay($time){
  animation-delay: $time;
  -webkit-animation-delay: $time;
}
@mixin opacity($number: 1) {
  opacity: $number; /* Android 2.1+, Chrome 4+, Firefox 2+, IE 9+, iOS 3.2+, Opera 9+, Safari 3.1+ */
  filter: alpha(opacity=$number*100);
}
@mixin imgshow(){
  max-width:120%;
  max-height:120%;
  min-width:100%;
  min-height:100%;
}
@mixin animation($duration, $timing, $iteration, $delay, $mode){
  /*动画完成一个周期花费时间*/
  -webkit-animation-duration:$duration;
  animation-duration:$duration;
  /*动画进出方式*/
  -webkit-animation-timing-function:$timing;
  animation-timing-function:$timing;
  /*动画循环次数 infinite：无限循环*/
  -webkit-animation-iteration-count:$iteration;
  animation-iteration-count:$iteration;
  /*动画播放起始时间*/
  -webkit-animation-delay:$delay;
  animation-delay:$delay;
  -webkit-animation-fill-mode:$mode;
  animation-fill-mode:$mode;
}

@-webkit-keyframes shakeOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@keyframes shakeOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}

@-webkit-keyframes shakeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
  60%, 80% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes shakeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
  60%, 80% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@-webkit-keyframes scalePoint {
  0%, 80%, 100% {
    -webkit-transform: scale(0.0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}
@keyframes scalePoint {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

@-webkit-keyframes shakeRotate {
   0%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  85% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@keyframes shakeRotate {
   0%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  85% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-webkit-keyframes drawline {
  0% {
    right:0
  }
  100% {
    right:100%
  }
}
@-webkit-keyframes drawline2 {
  0% {
    bottom:0
  }
  100% {
    bottom:100%
  }
}
@-webkit-keyframes drawline3 {
  0% {
    left:0
  }
  100% {
    left:100%
  }
}

@-webkit-keyframes heartBeat {
  0%,50%{
    -webkit-transform:scale(.95)
  }
  60%{
    -webkit-transform:scale(1)
  }
  65%{
    -webkit-transform:scale(.81)
  }
  70%,100%{
    -webkit-transform:scale(.95)
  }
}
@keyframes heartBeat {
  0%,50%{
    transform:scale(.95)
  }
  60%{
    transform:scale(1)
  }
  65%{
    transform:scale(.81)
  }
  70%,100%{
    transform:scale(.95)
  }
}

@-webkit-keyframes fadeInDown {
  0%{
    opacity:0;
    -webkit-transform:translateY(-20px);
    transform:translateY(-20px)
  }
  100%{
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@keyframes fadeInDown {
  0%{
    opacity:0;
    -webkit-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    transform:translateY(-20px)
  }
  100%{
    opacity:1;
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)
  }
}
@-webkit-keyframes fadeInDownOpacity {
  0%{
    opacity:0
  }
  100%{
    opacity:.85;
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@keyframes fadeInDownOpacity {
  0%{
    opacity:0;
    -webkit-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    transform:translateY(-20px)
  }
  100%{
    opacity:.85;
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)
  }
}

@-webkit-keyframes fadeOutDown {
  0%{
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
  100%{
    opacity:0;
    -webkit-transform:translateY(20px);
    transform:translateY(20px)
  }
}
@keyframes fadeOutDown{
  0%{
    opacity:1;
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)
  }
  100%{
    opacity:0;
    -webkit-transform:translateY(20px);
    -ms-transform:translateY(20px);
    transform:translateY(20px)
  }
}

@-webkit-keyframes bounceInLeft {
  0%{
    opacity:0;
    -webkit-transform:translateX(-2000px);
    transform:translateX(-2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateX(30px);
    transform:translateX(30px)
  }
  80%{
    -webkit-transform:translateX(-10px);
    transform:translateX(-10px)
  }
  100%{
    -webkit-transform:translateX(0);
    transform:translateX(0)
  }
}
@keyframes bounceInLeft {
  0%{
    opacity:0;
    -webkit-transform:translateX(-2000px);
    -ms-transform:translateX(-2000px);
    transform:translateX(-2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateX(30px);
    -ms-transform:translateX(30px);
    transform:translateX(30px)
  }
  80%{
    -webkit-transform:translateX(-10px);
    -ms-transform:translateX(-10px);
    transform:translateX(-10px)
  }
  100%{
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0)
  }
}

@-webkit-keyframes bounceInRight {
  0%{
    opacity:0;
    -webkit-transform:translateX(2000px);
    transform:translateX(2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateX(-30px);
    transform:translateX(-30px)
  }
  80%{
    -webkit-transform:translateX(10px);
    transform:translateX(10px)
  }
  100%{
    -webkit-transform:translateX(0);
    transform:translateX(0)
  }
}
@keyframes bounceInRight {
  0%{
    opacity:0;
    -webkit-transform:translateX(2000px);
    -ms-transform:translateX(2000px);
    transform:translateX(2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateX(-30px);
    -ms-transform:translateX(-30px);
    transform:translateX(-30px)
  }
  80%{
    -webkit-transform:translateX(10px);
    -ms-transform:translateX(10px);
    transform:translateX(10px)
  }
  100%{
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0)
  }
}

@-webkit-keyframes bounceInUp {
  0%{
    opacity:0;
    -webkit-transform:translateY(2000px);
    transform:translateY(2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateY(-30px);
    transform:translateY(-30px)
  }
  80%{
    -webkit-transform:translateY(10px);
    transform:translateY(10px)
  }
  100%{
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@keyframes bounceInUp {
  0%{
    opacity:0;
    -webkit-transform:translateY(2000px);
    -ms-transform:translateY(2000px);
    transform:translateY(2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateY(-30px);
    -ms-transform:translateY(-30px);
    transform:translateY(-30px)
  }
  80%{
    -webkit-transform:translateY(10px);
    -ms-transform:translateY(10px);
    transform:translateY(10px)
  }
  100%{
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)
  }
}

@-webkit-keyframes bounceOutUp {
  0%{
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
  20%{
    opacity:1;
    -webkit-transform:translateY(20px);
    transform:translateY(20px)
  }
  100%{
    opacity:0;
    -webkit-transform:translateY(-2000px);
    transform:translateY(-2000px)
  }
}
@keyframes bounceOutUp {
  0%{
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)
  }
  20%{
    opacity:1;
    -webkit-transform:translateY(20px);
    -ms-transform:translateY(20px);
    transform:translateY(20px)
  }
  100%{
    opacity:0;
    -webkit-transform:translateY(-2000px);
    -ms-transform:translateY(-2000px);
    transform:translateY(-2000px)
  }
}

@-webkit-keyframes bounceInDown {
  0%{
    opacity:0;
    -webkit-transform:translateY(-2000px);
    transform:translateY(-2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateY(30px);
    transform:translateY(30px)
  }
  80%{
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px)
  }
  100%{
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@keyframes bounceInDown {
  0%{
    opacity:0;
    -webkit-transform:translateY(-2000px);
    -ms-transform:translateY(-2000px);
    transform:translateY(-2000px)
  }
  60%{
    opacity:1;
    -webkit-transform:translateY(30px);
    -ms-transform:translateY(30px);
    transform:translateY(30px)
  }
  80%{
    -webkit-transform:translateY(-10px);
    -ms-transform:translateY(-10px);
    transform:translateY(-10px)
  }
  100%{
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)
  }
}
@-webkit-keyframes bounceIn {
  0%,100%,20%,40%,60%,80%{
    -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
    transition-timing-function:cubic-bezier(0.215,.61,.355,1)
  }
  20%{
    -webkit-transform:scale3d(1.1,1.1,1.1);
    transform:scale3d(1.1,1.1,1.1)
  }
  40%{
    -webkit-transform:scale3d(.9,.9,.9);
    transform:scale3d(.9,.9,.9)
  }
  60%{
    opacity:1;
    -webkit-transform:scale3d(1.03,1.03,1.03);
    transform:scale3d(1.03,1.03,1.03)
  }
  80%{
    -webkit-transform:scale3d(.97,.97,.97);
    transform:scale3d(.97,.97,.97)
  }
  100%{
    opacity:1;
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1)
  }
}
@keyframes bounceBeat {
  0%,100%,20%,40%,60%,80%{
    -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
    transition-timing-function:cubic-bezier(0.215,.61,.355,1)
  }
  20%{
    -webkit-transform:scale3d(1.1,1.1,1.1);
    -ms-transform:scale3d(1.1,1.1,1.1);
    transform:scale3d(1.1,1.1,1.1)
  }
  40%{
    -webkit-transform:scale3d(.9,.9,.9);
    -ms-transform:scale3d(.9,.9,.9);
    transform:scale3d(.9,.9,.9)
  }
  60%{
    -webkit-transform:scale3d(1.03,1.03,1.03);
    -ms-transform:scale3d(1.03,1.03,1.03);
    transform:scale3d(1.03,1.03,1.03)
  }
  80%{
    -webkit-transform:scale3d(.97,.97,.97);
    -ms-transform:scale3d(.97,.97,.97);
    transform:scale3d(.97,.97,.97)
  }
  100%{
    -webkit-transform:scale3d(1,1,1);
    -ms-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1)
  }
}
@-webkit-keyframes bounceBeat {
  0%,100%,20%,40%,60%,80%{
    -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
    transition-timing-function:cubic-bezier(0.215,.61,.355,1)
  }
  0%{
    -webkit-transform:scale3d(.3,.3,.3);
    transform:scale3d(.3,.3,.3)
  }
  20%{
    -webkit-transform:scale3d(1.1,1.1,1.1);
    transform:scale3d(1.1,1.1,1.1)
  }
  40%{
    -webkit-transform:scale3d(.9,.9,.9);
    transform:scale3d(.9,.9,.9)
  }
  60%{
    -webkit-transform:scale3d(1.03,1.03,1.03);
    transform:scale3d(1.03,1.03,1.03)
  }
  80%{
    -webkit-transform:scale3d(.97,.97,.97);
    transform:scale3d(.97,.97,.97)
  }
  100%{
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1)
  }
}
@keyframes bounceIn {
  0%,100%,20%,40%,60%,80%{
    -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
    transition-timing-function:cubic-bezier(0.215,.61,.355,1)
  }
  0%{
    opacity:0;
    -webkit-transform:scale3d(.3,.3,.3);
    -ms-transform:scale3d(.3,.3,.3);
    transform:scale3d(.3,.3,.3)
  }
  20%{
    -webkit-transform:scale3d(1.1,1.1,1.1);
    -ms-transform:scale3d(1.1,1.1,1.1);
    transform:scale3d(1.1,1.1,1.1)
  }
  40%{
    -webkit-transform:scale3d(.9,.9,.9);
    -ms-transform:scale3d(.9,.9,.9);
    transform:scale3d(.9,.9,.9)
  }
  60%{
    opacity:1;
    -webkit-transform:scale3d(1.03,1.03,1.03);
    -ms-transform:scale3d(1.03,1.03,1.03);
    transform:scale3d(1.03,1.03,1.03)
  }
  80%{
    -webkit-transform:scale3d(.97,.97,.97);
    -ms-transform:scale3d(.97,.97,.97);
    transform:scale3d(.97,.97,.97)
  }
  100%{
    opacity:1;
    -webkit-transform:scale3d(1,1,1);
    -ms-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1)
  }
}
@-webkit-keyframes bounceInLeft{
  0%,100%,60%,75%,90%{
    -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
    transition-timing-function:cubic-bezier(0.215,.61,.355,1)
  }
  0%{
    opacity:0;
    -webkit-transform:translate3d(-3000px,0,0);
    transform:translate3d(-3000px,0,0)
  }
  60%{
    opacity:1;
    -webkit-transform:translate3d(25px,0,0);
    transform:translate3d(25px,0,0)
  }
  75%{
    -webkit-transform:translate3d(-10px,0,0);
    transform:translate3d(-10px,0,0)
  }
  90%{
    -webkit-transform:translate3d(5px,0,0);
    transform:translate3d(5px,0,0)
  }
  100%{
    -webkit-transform:none;
    transform:none
  }
}
@keyframes bounceInLeft{
  0%,100%,60%,75%,90%{
    -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
    transition-timing-function:cubic-bezier(0.215,.61,.355,1)
  }
  0%{
    opacity:0;
    -webkit-transform:translate3d(-3000px,0,0);
    -ms-transform:translate3d(-3000px,0,0);
    transform:translate3d(-3000px,0,0)
  }
  60%{
    opacity:1;
    -webkit-transform:translate3d(25px,0,0);
    -ms-transform:translate3d(25px,0,0);
    transform:translate3d(25px,0,0)
  }
  75%{
    -webkit-transform:translate3d(-10px,0,0);
    -ms-transform:translate3d(-10px,0,0);
    transform:translate3d(-10px,0,0)
  }
  90%{
    -webkit-transform:translate3d(5px,0,0);
    -ms-transform:translate3d(5px,0,0);
    transform:translate3d(5px,0,0)
  }
  100%{
    -webkit-transform:none;
    -ms-transform:none;
    transform:none
  }
}
@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}